<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="With the Metro 4 you can easily create different types of buttons, stylized to Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Buttons - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Buttons</a></li>
                    <li class="toc-entry">
                        <a href="#_push_buttons">Push buttons</a>
                        <ul>
                            <li class="toc-entry"><a href="#_push_buttons_with_icons">With icons</a></li>
                            <li class="toc-entry"><a href="#_outline_buttons">Outline button</a></li>
                            <li class="toc-entry"><a href="#_push_buttons_sizes">Any sizes</a></li>
                            <li class="toc-entry"><a href="#_push_buttons_rounded">Rounded corners</a></li>
                            <li class="toc-entry"><a href="#_push_buttons_square_and_cycle">Square &amp; cycle</a></li>
                            <li class="toc-entry"><a href="#_push_buttons_shadow">Shadowed button</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry"><a href="#_flat_button">Flat button</a></li>
                    <li class="toc-entry"><a href="#_command_button">Command button</a></li>
                    <li class="toc-entry"><a href="#_image_button">Image button</a></li>
                    <li class="toc-entry"><a href="#_toolbars">Toolbars</a></li>
                    <li class="toc-entry"><a href="#_shortcuts">Shortcut</a></li>
                    <li class="toc-entry"><a href="#_dropdown_buttons">Dropdown</a></li>
                    <li class="toc-entry"><a href="#_split_buttons">Split button</a></li>
                    <li class="toc-entry"><a href="#_info_button">Info button</a></li>
                    <li class="toc-entry">
                        <a href="#_pagination">Pagination</a>
                        <ul>
                            <li class="toc-entry"><a href="#_pagination_no_gaps">No gaps</a></li>
                            <li class="toc-entry"><a href="#_pagination_disabled">Disabled items</a></li>
                            <li class="toc-entry"><a href="#_pagination_sizing">Sizing</a></li>
                            <li class="toc-entry"><a href="#_pagination_alignment">Alignment</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry"><a href="#_breadcrumbs">Breadcrumbs</a></li>
                    <li class="toc-entry"><a href="#_buttons_group">Buttons group</a></li>
                    <li class="toc-entry"><a href="#_buttons_action">Action button</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Buttons</h1>
                <p class="text-leader">
                    With the Metro 4 you can easily create different types of buttons, stylized to Windows Metro Style.
                </p>

                <!-- ads-html -->

                <h3 id="_push_buttons">Push buttons</h3>
                <p>
                    Button styles can be applied to anything with the <span class="tally">.button</span> class applied. To change button color use one of accent color subclasses:
                    <span class="tally">.primary</span>,
                    <span class="tally">.secondary</span>,
                    <span class="tally">.success</span>,
                    <span class="tally">.alert</span>,
                    <span class="tally">.warning</span>,
                    <span class="tally">.yellow</span>,
                    <span class="tally">.info</span>,
                    <span class="tally">.dark</span>.

                </p>

                <div class="example">
                    <button class="button">Default</button>
                    <button class="button primary">Primary</button>
                    <button class="button secondary">Secondary</button>
                    <button class="button success">Success</button>
                    <button class="button alert">Alert</button>
                    <button class="button warning">Warning</button>
                    <button class="button yellow">Yellow</button>
                    <button class="button info">Info</button>
                    <button class="button dark">Dark</button>
                    <button class="button light">Light</button>
                    <button class="button link">Link</button>
                </div>

                <pre class=""><code>
                    &lt;button class="button"&gt;Default&lt;/button&gt;
                    &lt;button class="button primary"&gt;Primary&lt;/button&gt;
                    &lt;button class="button secondary"&gt;Secondary&lt;/button&gt;
                    &lt;button class="button success"&gt;Success&lt;/button&gt;
                    &lt;button class="button alert"&gt;Alert&lt;/button&gt;
                    &lt;button class="button warning"&gt;Warning&lt;/button&gt;
                    &lt;button class="button yellow"&gt;Yellow&lt;/button&gt;
                    &lt;button class="button info"&gt;Info&lt;/button&gt;
                    &lt;button class="button dark"&gt;Dark&lt;/button&gt;
                    &lt;button class="button light"&gt;Light&lt;/button&gt;
                    &lt;button class="button link"&gt;Link&lt;/button&gt;
                </code></pre>

                <h6>Note for .button class</h6>
                <p>
                    The <span class="tally">.button</span> class are designed to be used with the <span class="tally">&lt;button&gt;</span> element.
                    However, you can also use these classes on <span class="tally">&lt;a&gt;</span> or <span class="tally">&lt;input&gt;</span> elements (though some browsers may apply a slightly different rendering).
                </p>
                <p>
                    When using button class on <span class="tally">&lt;a&gt;</span> elements that are used to trigger in-page functionality (like collapsing content),
                    rather than linking to new pages or sections within the current page, these links should be given a <span class="tally">role="button"</span> to appropriately convey their purpose to assistive technologies such as screen readers.
                </p>

                <div class="example">
                    <a class="button" href="" role="button" onclick="return false">Link</a>
                    <input class="button " type="button" value="Input">
                    <input class="button " type="submit" value="Submit">
                    <input class="button " type="reset" value="Reset">
                </div>

                <pre class=""><code>
                    &lt;a class="button " href="#" role="button"&gt;Link&lt;/a&gt;
                    &lt;input class="button " type="button" value="Input"&gt;
                    &lt;input class="button " type="submit" value="Submit"&gt;
                    &lt;input class="button " type="reset" value="Reset"&gt;
                </code></pre>

                <h4 id="_push_buttons_with_icons">Push buttons with icons</h4>
                <p>
                    Metro 4 support both types for adding icon to button: icon font and image.
                </p>

                <div class="example">
                    <button class="button"><span class="mif-checkmark"></span> Font</button>
                    <button class="button"><span class="mif-users"></span></button>
                    <button class="button"><img src="images/checkmark.png"> Image</button>
                    <button class="button"><img src="images/keycdn-logo.svg"></button>
                </div>

                <pre class=""><code>
                    &lt;button class="button"&gt;&lt;span class="mif-checkmark"&gt;&lt;/span&gt; Font&lt;/button&gt;
                    &lt;button class="button"&gt;&lt;span class="mif-users"&gt;&lt;/span&gt;&lt;/button&gt;
                    &lt;button class="button"&gt;&lt;img src="images/checkmark.png"&gt; Image&lt;/button&gt;
                    &lt;button class="button"&gt;&lt;img src="images/keycdn-logo.svg"&gt;&lt;/button&gt;
                </code></pre>

                <h4 id="_outline_buttons">Outline buttons</h4>
                <p>
                    In need of a button, but not the hefty background colors they bring? Add subclass <span class="tally">.outline</span> to remove all background images and colors on any button.
                </p>
                <div class="example">
                    <button class="button primary outline">Primary</button>
                    <button class="button secondary outline">Secondary</button>
                    <button class="button success outline">Success</button>
                    <button class="button alert outline">Alert</button>
                    <button class="button warning outline">Warning</button>
                    <button class="button info outline">Info</button>
                    <button class="button dark outline">Dark</button>
                    <button class="button yellow outline">Yellow</button>
                </div>
                <pre class=""><code>
                    &lt;button class="button primary outline"&gt;Primary&lt;/button&gt;
                    &lt;button class="button secondary outline"&gt;Secondary&lt;/button&gt;
                    &lt;button class="button success outline"&gt;Success&lt;/button&gt;
                    &lt;button class="button alert outline"&gt;Alert&lt;/button&gt;
                    &lt;button class="button warning outline"&gt;Warning&lt;/button&gt;
                    &lt;button class="button info outline"&gt;Info&lt;/button&gt;
                    &lt;button class="button dark outline"&gt;Dark&lt;/button&gt;
                    &lt;button class="button yellow outline"&gt;Yellow&lt;/button&gt;
                </code></pre>
                <h6>Note for outline</h6>
                <p>
                    <span class="tally">outline</span> class required one of accent color subclasses:
                        <span class="tally">.primary</span>,
                        <span class="tally">.secondary</span>,
                        <span class="tally">.success</span>,
                        <span class="tally">.alert</span>,
                        <span class="tally">.warning</span>,
                        <span class="tally">.yellow</span>,
                        <span class="tally">.info</span>,
                        <span class="tally">.dark</span>.
                </p>

                <h4 id="_push_buttons_sizes">Push button sizes</h4>
                <p>
                    Fancy larger or smaller buttons? Add one of classes: <span class="tally">.mini</span>, <span class="tally">.small</span> or <span class="tally">.large</span> for additional sizes.
                </p>
                <div class="example">
                    <button class="button primary mini">mini</button>
                    <button class="button primary small">small</button>
                    <button class="button primary">default</button>
                    <button class="button primary large">Large button</button>
                    <button class="button primary outline mini">Mini</button>
                    <button class="button secondary outline small">Small</button>
                    <button class="button success outline">Default</button>
                    <button class="button alert outline large">Outline Large</button>
                </div>

                <pre class=""><code>
                    &lt;button class="button primary mini"&gt;mini&lt;/button&gt;
                    &lt;button class="button primary small"&gt;small&lt;/button&gt;
                    &lt;button class="button primary"&gt;default&lt;/button&gt;
                    &lt;button class="button primary large"&gt;Large button&lt;/button&gt;
                    &lt;button class="button primary outline mini"&gt;Mini&lt;/button&gt;
                    &lt;button class="button secondary outline small"&gt;Small&lt;/button&gt;
                    &lt;button class="button success outline"&gt;Default&lt;/button&gt;
                    &lt;button class="button alert outline large"&gt;Outline Large&lt;/button&gt;
                </code></pre>

                <h4 id="_push_buttons_rounded">Rounded corners</h4>
                <p>
                    Need rounded corners? Add class: <span class="tally">.rounded</span>. This class add <span class="tally">border-radius: 0.25rem</span> to button.
                </p>
                <div class="example">
                    <button class="button primary mini rounded">mini</button>
                    <button class="button primary small rounded">small</button>
                    <button class="button primary rounded">default</button>
                    <button class="button primary large rounded">Large button</button>
                    <button class="button primary outline mini rounded">Mini</button>
                    <button class="button secondary outline small rounded">Small</button>
                    <button class="button success outline rounded">Default</button>
                    <button class="button alert outline large rounded">Outline Large</button>
                </div>
                <pre class=""><code>
                    &lt;button class="button primary mini rounded"&gt;mini&lt;/button&gt;
                    &lt;button class="button success outline rounded"&gt;Default&lt;/button&gt;
                </code></pre>

                <h4 id="_push_buttons_square_and_cycle">Square &amp; cycle buttons</h4>
                <p>
                    Need square or cycle button? Add one of modifiers classes: <span class="tally">.square</span> or <span class="tally">.cycle</span>.
                </p>
                <div class="example">
                    <div>
                        <button class="button primary square mini"><span class="mif-checkmark"></span></button>
                        <button class="button primary square small"><span class="mif-checkmark"></span></button>
                        <button class="button primary square "><span class="mif-checkmark"></span></button>
                        <button class="button primary square large"><span class="mif-checkmark"></span></button>
                        <button class="button primary cycle mini"><span class="mif-checkmark"></span></button>
                        <button class="button primary cycle small"><span class="mif-checkmark"></span></button>
                        <button class="button primary cycle "><span class="mif-checkmark"></span></button>
                        <button class="button primary cycle large"><span class="mif-checkmark"></span></button>
                    </div>
                    <br />
                    <div>
                        <button class="button primary square mini outline"><span class="mif-download"></span></button>
                        <button class="button primary square small outline"><span class="mif-download"></span></button>
                        <button class="button primary square outline"><span class="mif-download"></span></button>
                        <button class="button success square large outline"><span class="mif-download"></span></button>
                        <button class="button secondary cycle mini outline"><span class="mif-play"></span></button>
                        <button class="button warning cycle small outline"><span class="mif-play"></span></button>
                        <button class="button dark cycle outline"><span class="mif-play"></span></button>
                        <button class="button info cycle large outline"><span class="mif-checkmark"></span></button>
                    </div>
                    <br />
                    <div>
                        <button class="button primary square mini rounded"><span class="mif-download"></span></button>
                        <button class="button primary square small rounded"><span class="mif-download"></span></button>
                        <button class="button primary square rounded"><span class="mif-download"></span></button>
                        <button class="button success square large rounded"><span class="mif-download"></span></button>
                        <button class="button primary square mini outline rounded"><span class="mif-download"></span></button>
                        <button class="button primary square small outline rounded"><span class="mif-download"></span></button>
                        <button class="button primary square outline rounded"><span class="mif-download"></span></button>
                        <button class="button success square large outline rounded"><span class="mif-download"></span></button>
                    </div>
                </div>

                <pre class=""><code>
                        &lt;button class="button primary square mini"&gt;&lt;/button&gt;
                        &lt;button class="button primary square outline"&gt;&lt;/button&gt;
                        &lt;button class="button primary cycle small outline"&gt;&lt;/button&gt;
                        &lt;button class="button primary cycle "&gt;&lt;/button&gt;
                </code></pre>

                <h4 id="_push_buttons_shadow">Shadowed button</h4>
                <p>
                    You can easy create button with shadow. Add class <span class="tally">.drop-shadow</span> to button and get button with shadow.
                </p>
                <div class="example">
                    <button class="button drop-shadow">Default</button>
                    <button class="button primary drop-shadow">Primary</button>
                    <button class="button secondary drop-shadow">Secondary</button>
                    <button class="button success drop-shadow">Success</button>
                    <button class="button alert drop-shadow">Alert</button>
                    <button class="button warning drop-shadow">Warning</button>
                    <button class="button yellow drop-shadow">Yellow</button>
                    <button class="button info drop-shadow">Info</button>
                    <button class="button dark drop-shadow">Dark</button>
                    <button class="button light drop-shadow">Light</button>
                </div>
                <pre class=""><code>
                    &lt;button class="button drop-shadow"&gt;Default&lt;/button&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_flat_button">Flat buttons</h3>
                <p>
                    A button made of ink that displays ink reactions on press but does not lift.
                </p>
                <div class="example">
                    <button class="button flat-button">Flat button</button>
                </div>
                <pre><code class="html">
                    &lt;button class="button flat-button"&gt;Flat button&lt;/button&gt;
                </code></pre>

                <h3 id="_command_button">Command buttons</h3>
                <p>
                    Need a Windows Command button? Create it with class <span class="tally">.command-button</span>. Command button support accent mode (primary, alert, ...), outline mode, rounded corners and left or right icon position.
                </p>
                <div class="example">
                    <button class="command-button d-flex m-1">
                        <span class="mif-share icon"></span>
                        <span class="caption">
                            Yes, share and connect
                            <small>Use this option for home or work</small>
                        </span>
                    </button>
                    <button class="command-button primary d-flex m-1">
                        <span class="mif-share icon"></span>
                        <span class="caption">
                            Yes, share and connect
                            <small>Use this option for home or work</small>
                        </span>
                    </button>
                    <button class="command-button primary outline rounded d-flex m-1">
                        <span class="mif-share icon"></span>
                        <span class="caption">
                            Yes, share and connect
                            <small>Use this option for home or work</small>
                        </span>
                    </button>
                    <button class="command-button rounded icon-right alert d-flex m-1">
                        <span class="mif-share icon"></span>
                        <span class="caption">
                            Yes, share and connect
                            <small>Use this option for home or work</small>
                        </span>
                    </button>
                </div>

                <pre class=""><code>
                    &lt;button class="command-button"&gt;
                        &lt;span class="mif-share icon"&gt;&lt;/span&gt;
                        &lt;span class="caption"&gt;
                            Yes, share and connect
                            &lt;small&gt;Use this option for home or work&lt;/small&gt;
                        &lt;/span&gt;
                    &lt;/button&gt;
                    &lt;button class="command-button primary outline rounded"&gt;
                        &lt;span class="mif-share icon"&gt;&lt;/span&gt;
                        &lt;span class="caption"&gt;
                            Yes, share and connect
                            &lt;small&gt;Use this option for home or work&lt;/small&gt;
                        &lt;/span&gt;
                    &lt;/button&gt;
                    &lt;button class="command-button icon-right warning"&gt;
                        &lt;span class="mif-share icon"&gt;&lt;/span&gt;
                        &lt;span class="caption"&gt;
                            Yes, share and connect
                            &lt;small&gt;Use this option for home or work&lt;/small&gt;
                        &lt;/span&gt;
                    &lt;/button&gt;
                </code></pre>

                <h3 id="_image_button">Image buttons</h3>
                <p>
                    With Metro 4 you can simple create image button. Use <span class="tally">.image-button</span> class to create image button. Image button support accent mode (primary, alert, ...), outline mode, rounded corners and left or right icon position.
                </p>

                <div class="example">
                    <div>
                        <button class="image-button">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                        <button class="image-button icon-right">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                    </div>
                    <br />
                    <div>
                        <button class="image-button primary">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                        <button class="image-button secondary">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                        <button class="image-button success">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                        <button class="image-button warning">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                        <button class="image-button alert">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                        <button class="image-button info">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                    </div>
                    <br />
                    <div>
                        <button class="image-button primary outline">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                        <button class="image-button secondary outline">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                        <button class="image-button success outline">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                        <button class="image-button warning outline">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                        <button class="image-button alert outline">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                        <button class="image-button info outline">
                            <span class="mif-share icon"></span>
                            <span class="caption">Share it</span>
                        </button>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;button class="image-button"&gt;
                        &lt;span class="mif-share icon"&gt;&lt;/span&gt;
                        &lt;span class="caption"&gt;Share it&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;button class="image-button icon-right"&gt;
                        &lt;span class="mif-share icon"&gt;&lt;/span&gt;
                        &lt;span class="caption"&gt;Share it&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;button class="image-button alert"&gt;
                        &lt;span class="mif-share icon"&gt;&lt;/span&gt;
                        &lt;span class="caption"&gt;Share it&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;button class="image-button warning outline"&gt;
                        &lt;span class="mif-share icon"&gt;&lt;/span&gt;
                        &lt;span class="caption"&gt;Share it&lt;/span&gt;
                    &lt;/button&gt;
                </code></pre>

                <h3 id="_shortcuts">Shortcuts</h3>
                <p>
                    Need shortcut button? With Metro 4 you can simple create shortcut button. Use <span class="tally">.shortcut</span> class to create shortcut button.
                    Shortcuts support accent mode (primary, alert, ...), outline mode and rounded corners.
                </p>

                <div class="example">
                    <button class="shortcut">
                        <span class="caption">Rocket</span>
                        <span class="mif-rocket icon"></span>
                    </button>
                    <button class="shortcut primary">
                        <span class="badge">10</span>
                        <span class="caption">Rocket</span>
                        <span class="mif-rocket icon"></span>
                    </button>
                    <button class="shortcut secondary outline">
                        <span class="badge">10</span>
                        <span class="caption">Rocket</span>
                        <span class="mif-rocket icon"></span>
                    </button>
                    <button class="shortcut alert rounded">
                        <span class="badge">10</span>
                        <span class="caption">Rocket</span>
                        <span class="mif-rocket icon"></span>
                    </button>
                    <button class="shortcut alert rounded">
                        <span class="badge">10</span>
                        <span class="caption">Rocket</span>
                        <img src="images/checkmark.png" class="icon">
                    </button>
                    <button class="shortcut warning no-caption">
                        <span class="mif-rocket icon"></span>
                    </button>
                    <button class="shortcut info outline rounded no-caption">
                        <span class="badge">10</span>
                        <span class="mif-rocket icon"></span>
                    </button>
                </div>

                <pre class=""><code>
                    &lt;button class="shortcut"&gt;
                        &lt;span class="caption"&gt;Rocket&lt;/span&gt;
                        &lt;span class="mif-rocket icon"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;button class="shortcut"&gt;
                        &lt;span class="badge"&gt;10&lt;/span&gt;
                        &lt;span class="caption"&gt;Rocket&lt;/span&gt;
                        &lt;span class="mif-rocket icon"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;button class="shortcut primary"&gt;
                        &lt;span class="badge"&gt;10&lt;/span&gt;
                        &lt;span class="caption"&gt;Rocket&lt;/span&gt;
                        &lt;span class="mif-rocket icon"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;button class="shortcut secondary outline"&gt;
                        &lt;span class="badge"&gt;10&lt;/span&gt;
                        &lt;span class="caption"&gt;Rocket&lt;/span&gt;
                        &lt;span class="mif-rocket icon"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;button class="shortcut alert rounded"&gt;
                        &lt;span class="badge"&gt;10&lt;/span&gt;
                        &lt;span class="caption"&gt;Rocket&lt;/span&gt;
                        &lt;img src="images/checkmark.png" class="icon"&gt;
                    &lt;/button&gt;
                    &lt;button class="shortcut info outline rounded no-caption"&gt;
                        &lt;span class="badge"&gt;10&lt;/span&gt;
                        &lt;span class="mif-rocket icon"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                </code></pre>

                <h3 id="_toolbars">Toolbars</h3>
                <p>
                    If you need to create toolbar, Metro 4 provides the special classes fro this: <span class="tally">.toolbar</span> and <span class="tally">.tool-button</span>.
                    Toolbar buttons support accent mode (primary, alert, ...), outline mode and rounded corners.
                </p>
                <div class="example">
                    <div class="toolbar">
                        <button class="tool-button"><span class="mif-floppy-disk"></span></button>
                        <button class="tool-button"><img src="images/checkmark.png"></button>
                        <button class="tool-button text-button">Open</button>
                    </div>
                    <div class="toolbar">
                        <button class="tool-button primary"><span class="mif-floppy-disk"></span></button>
                        <button class="tool-button info"><span class="mif-printer"></span></button>
                        <button class="tool-button success text-button">Open</button>
                    </div>
                    <div class="toolbar">
                        <button class="tool-button primary outline"><span class="mif-floppy-disk"></span></button>
                        <button class="tool-button info outline"><span class="mif-printer"></span></button>
                        <button class="tool-button success outline text-button">Open</button>
                    </div>
                    <div class="toolbar">
                        <button class="tool-button primary rounded"><span class="mif-floppy-disk"></span></button>
                        <button class="tool-button info rounded"><span class="mif-printer"></span></button>
                        <button class="tool-button success rounded text-button">Open</button>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;div class="toolbar"&gt;
                        &lt;button class="tool-button"&gt;&lt;span class="mif-floppy-disk"&gt;&lt;/span&gt;&lt;/button&gt;
                        &lt;button class="tool-button"&gt;&lt;img src="images/checkmark.png"&gt;&lt;/button&gt;
                        &lt;button class="tool-button"&gt;Open&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class="toolbar"&gt;
                        &lt;button class="tool-button primary"&gt;...&lt;/button&gt;
                        &lt;button class="tool-button primary outline"&gt;...&lt;/button&gt;
                        &lt;button class="tool-button primary rounded"&gt;...&lt;/button&gt;
                    &lt;/div&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_dropdown_buttons">Dropdown</h3>
                <p>
                    If you need to create button with dropdown menu, use <code>.dropdown-button</code> wrapper.
                </p>

                <div class="example">
                    <div class="dropdown-button">
                        <button class="button dropdown-toggle">Button</button>
                        <ul class="d-menu" data-role="dropdown">
                            <li><a href="#">Reply</a></li>
                            <li><a href="#">Reply All</a></li>
                            <li><a href="#">Forward</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Delete</a></li>
                        </ul>
                    </div>

                    <div class="dropdown-button place-right">
                        <button class="button dropdown-toggle">Button</button>
                        <ul class="d-menu place-right" data-role="dropdown">
                            <li><a href="#">Reply</a></li>
                            <li><a href="#">Reply All</a></li>
                            <li><a href="#">Forward</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Delete</a></li>
                        </ul>
                    </div>
                </div>

                <pre class=""><code>
                    &lt;div class="dropdown-button"&gt;
                        &lt;button class="button dropdown-toggle"&gt;Button&lt;/button&gt;
                        &lt;ul class="d-menu" data-role="dropdown"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Reply&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Reply All&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Forward&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;div class="dropdown-button place-right"&gt;
                        &lt;button class="button dropdown-toggle"&gt;Button&lt;/button&gt;
                        &lt;ul class="d-menu place-right" data-role="dropdown"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Reply&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Reply All&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Forward&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_split_buttons">Split buttons</h3>
                <p>
                    If you need to create split button with primary function and dropdown menu, use <span class="tally">.split-button</span> wrapper.
                </p>

                <div class="example d-flex flex-justify-between">
                    <div class="split-button">
                        <button class="button">Reply</button>
                        <button class="split dropdown-toggle"></button>
                        <ul class="d-menu" data-role="dropdown">
                            <li><a href="#">Reply All</a></li>
                            <li><a href="#">Forward</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Delete</a></li>
                        </ul>
                    </div>
                    <div class="split-button">
                        <button class="button primary">Reply</button>
                        <button class="split alert dropdown-toggle"></button>
                        <ul class="d-menu" data-role="dropdown">
                            <li><a href="#">Reply All</a></li>
                            <li><a href="#">Forward</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Delete</a></li>
                        </ul>
                    </div>
                    <div class="split-button">
                        <button class="button warning rounded">Reply</button>
                        <button class="split info rounded dropdown-toggle"></button>
                        <ul class="d-menu" data-role="dropdown">
                            <li><a href="#">Reply All</a></li>
                            <li><a href="#">Forward</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Delete</a></li>
                        </ul>
                    </div>
                    <div class="split-button">
                        <button class="button warning rounded outline">Reply</button>
                        <button class="split info rounded outline dropdown-toggle"></button>
                        <ul class="d-menu" data-role="dropdown">
                            <li><a href="#">Reply All</a></li>
                            <li><a href="#">Forward</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Delete</a></li>
                        </ul>
                    </div>
                    <div class="split-button">
                        <button class="button success" onclick="alert('Main button clicked!')">Reply</button>
                        <button class="split info rounded" onclick="alert('Split button clicked!')"><span>...</span></button>
                    </div>
                </div>
                <pre class=""><code>
                    &lt;div class="split-button"&gt;
                        &lt;button class="button"&gt;Reply&lt;/button&gt;
                        &lt;button class="split dropdown-toggle"&gt;&lt;/button&gt;
                        &lt;ul class="d-menu" data-role="dropdown"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Reply All&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Forward&lt;/a&gt;&lt;/li&gt;
                            &lt;li class="divider"&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Delete&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_info_button">Info button</h3>
                <p>
                    If you need to create info button (as github split button) with primary function and additional info, use <span class="tally">.info-button</span> wrapper.
                </p>
                <div class="example">
                    <div class="info-button">
                        <a href="#" class="button"><span class="mif-star-full"></span> Star</a>
                        <a href="#" class="info">5,547</a>
                    </div>
                    <div class="info-button bg-red fg-white bd-red">
                        <a href="#" class="button"><span class="mif-star-full"></span> Star</a>
                        <a href="#" class="info">5,547</a>
                    </div>
                    <div class="info-button success bd-green rounded">
                        <a href="#" class="button"><span class="mif-star-full"></span> Star</a>
                        <a href="#" class="info">5,547</a>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="info-button"&gt;
                        &lt;a href="#" class="button"&gt;&lt;span class="mif-star-full"&gt;&lt;/span&gt; Star&lt;/a&gt;
                        &lt;a href="#" class="info"&gt;5,547&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="info-button bg-red fg-white bd-red"&gt;
                        &lt;a href="#" class="button"&gt;&lt;span class="mif-star-full"&gt;&lt;/span&gt; Star&lt;/a&gt;
                        &lt;a href="#" class="info"&gt;5,547&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="info-button success bd-green rounded"&gt;
                        &lt;a href="#" class="button"&gt;&lt;span class="mif-star-full"&gt;&lt;/span&gt; Star&lt;/a&gt;
                        &lt;a href="#" class="info"&gt;5,547&lt;/a&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_pagination">Pagination</h3>
                <p>
                    Need to create pagination? Create it easy with class <span class="tally">.pagination</span>. Pagination support accent mode (primary, alert, ...) and rounded corners.
                </p>

                <div class="example">
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next &gt;</a></li>
                    </ul>

                    <ul class="pagination alert">
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next &gt;</a></li>
                    </ul>

                    <ul class="pagination success rounded">
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next &gt;</a></li>
                    </ul>
                </div>

                <pre class=""><code>
                    &lt;ul class="pagination"&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item active"&gt;&lt;a class="page-link" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item no-link"&gt;&lt;a class="page-link"&gt;...&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;7&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;8&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;9&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item service"&gt;&lt;a class="page-link" href="#"&gt;Next &gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;

                    &lt;ul class="pagination alert"&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item active"&gt;&lt;a class="page-link" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item no-link"&gt;&lt;a class="page-link"&gt;...&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;7&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;8&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;9&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item service"&gt;&lt;a class="page-link" href="#"&gt;Next &gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;

                    &lt;ul class="pagination success rounded"&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item active"&gt;&lt;a class="page-link" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item no-link"&gt;&lt;a class="page-link"&gt;...&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;7&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;8&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;9&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item service"&gt;&lt;a class="page-link" href="#"&gt;Next &gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                </code></pre>

                <h4 id="_pagination_no_gaps">Pagination with no gaps</h4>
                <p>
                    If you need pagination control with no gaps, use <span class="tally">.no-gap</span> subclass to remove it.
                </p>

                <div class="example">
                    <ul class="pagination no-gap">
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next &gt;</a></li>
                    </ul>

                    <ul class="pagination alert no-gap">
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next &gt;</a></li>
                    </ul>

                    <ul class="pagination success rounded no-gap">
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next &gt;</a></li>
                    </ul>
                </div>

                <pre class=""><code>
                    &lt;ul class="pagination no-gap"&gt;...&lt;/ul&gt;
                </code></pre>

                <h4 id="_pagination_disabled">Disabled items</h4>

                <p>
                    If you need create disabled item for pagination, use class <span class="tally">.disabled</span> for required item.
                    While the <span class="tally">.disabled</span> class uses <span class="tally">pointer-events: none</span> to try to disable the link functionality of <span class="tally">&lt;a&gt;</span> ,
                    that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add <span class="tally">tabindex="-1"</span> on disabled links and use custom JavaScript to
                    fully disable their functionality.
                </p>

                <div class="example">
                    <ul class="pagination no-gap">
                        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next</a></li>
                    </ul>
                    <ul class="pagination warning no-gap">
                        <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next</a></li>
                    </ul>
                </div>

                <pre class=""><code>
                    &lt;ul class="pagination no-gap"&gt;
                        &lt;li class="page-item disabled"&gt;
                            &lt;a class="page-link" href="#" tabindex="-1"&gt;Previous&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item active"&gt;&lt;a class="page-link" href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item no-link"&gt;&lt;a class="page-link"&gt;...&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;7&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;8&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;9&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item service"&gt;&lt;a class="page-link" href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                </code></pre>

                <h4 id="_pagination_sizing">Sizing</h4>
                <p>
                    Fancy larger or smaller pagination? Add <span class="tally">.size-large</span> or <span class="tally">.size-small</span> for additional sizes.
                </p>
                <div class="example">
                    <ul class="pagination size-large">
                        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next</a></li>
                    </ul>
                    <ul class="pagination size-small">
                        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next</a></li>
                    </ul>
                    <ul class="pagination no-gap size-large">
                        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next</a></li>
                    </ul>
                    <ul class="pagination no-gap size-small">
                        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next</a></li>
                    </ul>
                </div>
                <pre class=""><code>
                    &lt;ul class="pagination size-large">...&lt;/ul>
                    &lt;ul class="pagination no-gap size-large">...&lt;/ul>
                    &lt;ul class="pagination size-small">...&lt;/ul>
                    &lt;ul class="pagination no-gap size-small">...&lt;/ul>
                </code></pre>

                <h4 id="_pagination_alignment">Alignment</h4>
                <p>
                    You can chage alignment of pagination with <a href="utils_flex.html">flexbox utilities</a> with a classes <span class="tally">.flex-justify-*</span> and them media variants.
                </p>
                <div class="example">
                    <ul class="pagination no-gap flex-justify-start">
                        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next</a></li>
                    </ul>
                    <ul class="pagination no-gap flex-justify-center">
                        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next</a></li>
                    </ul>
                    <ul class="pagination no-gap flex-justify-end">
                        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item no-link"><a class="page-link">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">7</a></li>
                        <li class="page-item"><a class="page-link" href="#">8</a></li>
                        <li class="page-item"><a class="page-link" href="#">9</a></li>
                        <li class="page-item service"><a class="page-link" href="#">Next</a></li>
                    </ul>
                </div>

                <pre class=""><code>
                    &lt;ul class="pagination flex-justify-start">...&lt;/ul>
                    &lt;ul class="pagination flex-justify-center">...&lt;/ul>
                    &lt;ul class="pagination flex-justify-end">...&lt;/ul>
                </code></pre>

                <!-- ads-html -->

                <h3 id="_breadcrumbs">Breadcrumbs</h3>
                <p>
                    Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
                    Separators are automatically added in CSS through <span class="tally">::before</span> and <span class="tally">::after</span>.
                </p>
                <div class="example">
                    <ul class="breadcrumbs">
                        <li class="page-item"><a href="#" class="page-link">Home</a></li>
                        <li class="page-item"><a href="#" class="page-link">Products</a></li>
                        <li class="page-item"><a href="#" class="page-link">Downloads</a></li>
                        <li class="page-item"><a href="#" class="page-link">Windows 10</a></li>
                    </ul>
                </div>

                <pre class=""><code>
                    &lt;ul class="breadcrumbs"&gt;
                        &lt;li class="page-item"&gt;&lt;a href="#" class="page-link"&gt;Home&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a href="#" class="page-link"&gt;Products&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a href="#" class="page-link"&gt;Downloads&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="page-item"&gt;&lt;a href="#" class="page-link"&gt;Windows 10&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                </code></pre>

                <h3 id="_buttons_group">Button group</h3>
                <p>
                    To create group add attribute <code>data-role="buttongroup"</code> to buttons container.
                    To setup mode of toggle, use attribute <code>data-mode="..."</code> with one of values: <code>one</code> (default) or <code>multi</code>.
                    Also you can set own classes to style active state with attribute <code>data-cls-active="..."</code>. The default value for this attribute <code>active</code>.
                </p>

                <div class="example">
                    <div class="row">
                        <div class="cell-md-4">
                            <h6>Default (one state)</h6>
                            <div data-role="buttongroup">
                                <button class="button">1</button>
                                <button class="button">2</button>
                                <button class="button active">3</button>
                            </div>
                        </div>
                        <div class="cell-md-4">
                            <h6>Multi state</h6>
                            <div data-role="buttongroup" data-mode="multi" data-cls-active="bg-red fg-white">
                                <button class="button">1</button>
                                <button class="button">2</button>
                                <button class="button">3</button>
                            </div>
                        </div>
                        <div class="cell-md-4">
                            <h6>Toolbar example</h6>
                            <div class="toolbar" data-role="buttongroup" data-mode="multi">
                                <button class="tool-button rounded"><span class="mif-bold"></span></button>
                                <button class="tool-button rounded"><span class="mif-italic"></span></button>
                                <button class="tool-button rounded"><span class="mif-underline"></span></button>
                            </div>
                            <div class="toolbar" data-role="buttongroup">
                                <button class="tool-button rounded"><span class="mif-sort-asc"></span></button>
                                <button class="tool-button rounded"><span class="mif-sort-desc"></span></button>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="buttongroup"&gt;
                        &lt;button class="button"&gt;1&lt;/button&gt;
                        &lt;button class="button"&gt;2&lt;/button&gt;
                        &lt;button class="button active"&gt;3&lt;/button&gt;
                    &lt;/div&gt;

                    &lt;div data-role="buttongroup" data-mode="multi"
                        data-cls-active="bg-red fg-white"&gt;
                        &lt;button class="button"&gt;1&lt;/button&gt;
                        &lt;button class="button"&gt;2&lt;/button&gt;
                        &lt;button class="button"&gt;3&lt;/button&gt;
                    &lt;/div&gt;

                    &lt;div class="toolbar" data-role="buttongroup"
                        data-mode="multi"&gt;
                        &lt;button class="tool-button rounded"&gt;
                            &lt;span class="mif-bold"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                        &lt;button class="tool-button rounded"&gt;
                            &lt;span class="mif-italic"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                        &lt;button class="tool-button rounded"&gt;
                            &lt;span class="mif-underline"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class="toolbar" data-role="buttongroup"&gt;
                        &lt;button class="tool-button rounded"&gt;
                            &lt;span class="mif-sort-asc"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                        &lt;button class="tool-button rounded"&gt;
                            &lt;span class="mif-sort-desc"&gt;&lt;/span&gt;
                        &lt;/button&gt;
                    &lt;/div&gt;
                </code></pre>
                <p>
                    For <code>button group</code> you can use two events: <code>data-on-button-group-create</code> and <code>data-on-button-click</code>.
                </p>
                <pre><code class="html">
                    &lt;div class="toolbar"
                        data-role="buttongroup"
                        data-on-button-click="console.log(arguments);"&gt;
                    ...
                    &lt;/div&gt;
                </code></pre>
                <p>
                    if you use <code>&lt;span&gt;</code> or <code>&lt;a&gt;</code> tags for creating buttons, you must specify this with attribute <code>data-targets="..."</code>
                </p>
                <div class="example d-flex flex-justify-center">
                    <div data-role="buttongroup" data-targets="button, a, span">
                        <button class="button">1</button>
                        <a class="button">2</a>
                        <span class="button">3</span>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="buttongroup" data-targets="button, a, span"&gt;
                        &lt;button class="button"&gt;1&lt;/button&gt;
                        &lt;a class="button"&gt;2&lt;/a&gt;
                        &lt;span class="button"&gt;3&lt;/span&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_buttons_action">Action button</h3>
                <p class="text-small">New in 4.2.10</p>
                <p>
                    Floating action buttons are used for a promoted action.
                    They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.
                </p>

                <p>Floating action buttons come in two sizes:</p>

                <ul>
                    <li>Default size: For most use cases</li>
                    <li>Mini size with class <code>.second</code></li>
                </ul>

                <div class="example">
                    <button class="action-button"><span class="icon"><span class="mif-plus"></span></span></button>
                    <button class="action-button second"><span class="icon"><span class="mif-plus"></span></span></button>
                </div>
                <pre><code>
                    &lt;button class="action-button"&gt;
                        &lt;span class="icon"&gt;&lt;span class="mif-plus"&gt;&lt;/span&gt;&lt;/span&gt;
                    &lt;/button&gt;

                    &lt;button class="action-button second"&gt;
                        &lt;span class="icon"&gt;&lt;span class="mif-plus"&gt;&lt;/span&gt;&lt;/span&gt;
                    &lt;/button&gt;
                </code></pre>

                <h4>Multi action button</h4>
                <p>
                    You can create <code>action button</code> with <code>multi actions</code>.
                    Sub actions can be dropped to
                        <code>top</code>,
                        <code>bottom</code>,
                        <code>left</code> or
                        <code>right</code>.
                </p>
                <p>
                    To change this behavior, you must add one of the next classes to actions list:
                    <code>.drop-bottom</code>,
                    <code>.drop-left</code> or
                    <code>.drop-right</code>. By default actions dropped to top.
                </p>

                <div class="example">
                    <div class="multi-action">
                        <button class="action-button rotate-minus bg-red fg-white"
                                onclick="$(this).toggleClass('active')">
                            <span class="icon"><span class="mif-plus"></span></span>
                        </button>
                        <ul class="actions drop-right">
                            <li class="bg-blue"><a href="#"><span class="mif-user-plus"></span></a></li>
                            <li class="bg-teal"><a href="#"><span class="mif-library"></span></a></li>
                            <li class="bg-pink"><a href="#"><span class="mif-alarm"></span></a></li>
                            <li class="bg-orange"><a href="#"><span class="mif-lock"></span></a></li>
                        </ul>
                    </div>
                </div>
                <pre><code>
                    &lt;div class="multi-action"&gt;
                        &lt;button class="action-button rotate-minus bg-red fg-white"
                                onclick="$(this).toggleClass('active')"&gt;
                            &lt;span class="icon"&gt;&lt;span class="mif-plus"&gt;&lt;/span&gt;&lt;/span&gt;
                        &lt;/button&gt;
                        &lt;ul class="actions drop-right"&gt;
                            &lt;li class="bg-blue"&gt;&lt;a href="#"&gt;&lt;span class="mif-user-plus"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                            &lt;li class="bg-teal"&gt;&lt;a href="#"&gt;&lt;span class="mif-library"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                            &lt;li class="bg-pink"&gt;&lt;a href="#"&gt;&lt;span class="mif-alarm"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                            &lt;li class="bg-orange"&gt;&lt;a href="#"&gt;&lt;span class="mif-lock"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4>Action button rotating icon</h4>
                <p>
                    To enable rotating button <code>icon</code>, you must add one of two classes <code>rotate</code> or <code>rotate-minus</code> to action button element.
                </p>

            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>